<template>
  <div class="app-container">
    <div class="content-box">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="商品基础属性" name="first">
          <el-form
            :model="form"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-position
            label-width="200px"
          >
            <div>
              <el-form-item label="商品分类" prop="cate_id">
                <el-cascader
                  :options="mapping_list.cate"
                  :show-all-levels="false"
                  :props="props"
                  placeholder="请选择"
                  v-model="form.cate_id"
                  @change="change_cate_id"
                ></el-cascader>
                <!-- <el-select
                  v-model="form.cate_id"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    :label="item"
                    :value="parseInt(index)"
                    :key="index"
                    v-for="(item, index) in mapping_list.cate"
                  />
                </el-select> -->
              </el-form-item>
              <el-form-item label="商品品牌" prop="brand_id">
                <el-select
                  v-model="form.brand_id"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    :label="item"
                    :value="parseInt(index)"
                    :key="index"
                    v-for="(item, index) in mapping_list.brand"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="商品编码" prop="goods_sn">
                <el-input
                  v-model="form.goods_sn"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
              <!-- <el-form-item label="HS编码" prop="hs_code">
                <el-input
                  v-model="form.hs_code"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item> -->
              <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item label="副标题" prop="subtitle">
                <el-input
                  v-model="form.subtitle"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
              <!-- <el-form-item label="关键词" prop="keywords">
                <el-input
                  v-model="form.keywords"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item> -->
              <!-- <el-form-item label="标签" prop="label_ids">
                <el-select
                  v-model="form.label_ids"
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    :label="item"
                    :value="parseInt(index)"
                    :key="index"
                    v-for="(item, index) in mapping_list.label"
                  />
                </el-select>
              </el-form-item> -->
              <!-- <el-form-item label="服务" prop="order_no">
                <el-select
                  v-model="form.service_ids"
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    :label="item"
                    :value="parseInt(index)"
                    :key="index"
                    v-for="(item, index) in mapping_list.service"
                  />
                </el-select>
              </el-form-item> -->
              <el-form-item label="权重" prop="weigh">
                <el-input-number :min="0" v-model="form.weigh" />
              </el-form-item>

              <el-form-item label="上架" prop="status">
                <el-switch
                  v-model="form.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="2"
                >
                </el-switch>
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
        <!-- <el-tab-pane label="商品税率" name="second">
          <el-form
            :model="form"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-position
            label-width="200px"
          >
            <el-form-item label="所在仓库" prop="warehouse">
              <el-select
                v-model="form.warehouse"
                placeholder="请选择"
                clearable
              >
                <el-option
                  :label="item"
                  :value="parseInt(index)"
                  :key="index"
                  v-for="(item, index) in mapping_list.warehouse"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="启用自定义税率 " prop="is_ware">
              <el-select v-model="form.is_ware" placeholder="请选择" clearable>
                <el-option label="启用自定义税率" :value="1" />
                <el-option label="关闭自定义税率" :value="2" />
              </el-select>
            </el-form-item>
            <div v-if="form.is_ware == 1">
              <el-form-item label="关税税率" prop="order_no">
                <el-input
                  v-model="form.tariff_rate"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
              <el-form-item label="关税折扣比" prop="order_no">
                <el-input
                  v-model="form.tariff_discount_ratio"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
              <el-form-item label="增值税税率" prop="order_no">
                <el-input
                  v-model="form.added_rate"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
              <el-form-item label="增值税折扣比" prop="order_no">
                <el-input
                  v-model="form.added_discount_ratio"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
              <el-form-item label="消费税税率" prop="order_no">
                <el-input
                  v-model="form.excise_rate"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
              <el-form-item label="消费税折扣比" prop="order_no">
                <el-input
                  v-model="form.excise_discount_ratio"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane> -->
        <el-tab-pane label="商品规格" name="third">
          <el-form
            :model="form"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-position
            label-width="200px"
          >
            <div>
              <el-form-item label="规格类型：" prop="spec_type">
                <el-radio-group v-model="form.spec_type">
                  <el-radio :label="1">单规格</el-radio>
                  <el-radio :label="2">多规格</el-radio>
                </el-radio-group>
              </el-form-item>

              <div v-if="form.spec_type == 1">
                <el-form-item label="规格编码" prop="sku_sn">
                  <el-input
                    v-model="form.sku_sn"
                    placeholder="请输入"
                    clearable
                    class="pice_box"
                  />
                </el-form-item>
                <!-- <el-form-item label="菜鸟id" prop="cai_id">
                  <el-input
                    v-model="form.cai_id"
                    placeholder="请输入"
                    clearable
                  />
                </el-form-item> -->
                <el-form-item label="条形码" prop="bar_code">
                  <el-input
                    v-model="form.bar_code"
                    placeholder="请输入"
                    clearable
                    class="pice_box"
                  />
                </el-form-item>
                <!-- <el-form-item label="定价" prop="set_price">
                  <el-input
                    v-model="form.set_price"
                    type="number"
                    placeholder="请输入"
                    clearable
                    class="pice_box"
                    min="0"
                    @blur="isnumber(form.set_price, 15)"
                  />
                </el-form-item> -->
                <el-form-item label="划线价" prop="line_price">
                  <el-input
                    v-model="form.line_price"
                    type="number"
                    placeholder="请输入"
                    clearable
                    class="pice_box"
                    min="0"
                    @blur="isnumber(form.line_price, 1)"
                  />
                </el-form-item>
                <!-- <el-form-item label="成本价" prop="cost_price">
                  <el-input
                    v-model="form.cost_price"
                    placeholder="请输入"
                    clearable
                    class="pice_box"
                    type="number"
                    min="0"
                    @blur="isnumber(form.cost_price, 2)"
                  />
                </el-form-item> -->
                <el-form-item label="供应价" prop="supply_price">
                  <el-input
                    v-model="form.supply_price"
                    placeholder="请输入"
                    clearable
                    class="pice_box"
                    type="number"
                    min="0"
                    @blur="isnumber(form.supply_price, 3)"
                  />
                </el-form-item>
                <el-form-item label="重量" prop="weight">
                  <el-input
                    v-model="form.weight"
                    placeholder="请输入"
                    clearable
                    class="pice_box"
                    type="number"
                    min="0"
                    @blur="isnumber(form.weight, 4)"
                  />
                </el-form-item>
                <el-form-item label="库存" prop="stock">
                  <el-input
                    v-model="form.stock"
                    placeholder="请输入"
                    clearable
                    class="pice_box"
                    type="number"
                    min="0"
                    @blur="isnumber(form.stock, 13)"
                  />
                </el-form-item>
                <!-- <el-form-item label="销售价（含税）" prop="price">
                  <el-input
                    v-model="form.price"
                    disabled
                    clearable
                    class="pice_box"
                  />
                </el-form-item> -->
                <!-- <el-form-item label="关税" prop="gs_price">
                  <el-input
                    v-model="form.gs_price"
                    clearable
                    class="pice_box"
                    disabled
                  />
                </el-form-item>
                <el-form-item label="增值税" prop="zzs_price">
                  <el-input
                    v-model="form.zzs_price"
                    clearable
                    class="pice_box"
                    disabled
                  />
                </el-form-item>
                <el-form-item label="消费税" prop="xfs_price">
                  <el-input
                    v-model="form.xfs_price"
                    clearable
                    class="pice_box"
                    disabled
                  />
                </el-form-item>
                <el-form-item label="税费" prop="sf_price">
                  <el-input
                    v-model="form.sf_price"
                    clearable
                    class="pice_box"
                    disabled
                  />
                </el-form-item> -->
              </div>
              <div v-else>
                <el-form-item label=" ">
                  <div class="input_box">
                    <el-button
                      v-if="show_addtitle"
                      @click="show_addtitle = false"
                      type="success"
                      >添加规格</el-button
                    >
                    <div v-else>
                      <div>
                        规格名：
                        <el-input
                          placeholder="请输入内容"
                          v-model="add_group_name"
                          clearable
                          size="small"
                        ></el-input>
                      </div>
                      <div>
                        规格值：
                        <el-input
                          placeholder="请输入内容"
                          v-model="add_spec_value"
                          clearable
                          size="small"
                          class="input_box"
                        ></el-input>
                      </div>
                      <el-button type="success" @click="addtitle"
                        >确认</el-button
                      >
                      <el-button>取消</el-button>
                    </div>
                    <div v-for="(item, index) in spec_attr" :key="index">
                      <div class="flex_align">
                        <div>{{ item.group_name }}</div>
                        <i
                          class="el-icon-close"
                          @click="delet_group(index)"
                        ></i>
                      </div>
                      <el-tag
                        :key="idx"
                        v-for="(tag, idx) in item.spec_items"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag, index, idx)"
                        class="tag_box"
                      >
                        {{ tag.spec_value }}
                      </el-tag>
                      <el-input
                        class="input-new-tag input_box"
                        v-if="inputVisible == index"
                        v-model="new_spec"
                        ref="saveTagInput"
                        placeholder="请输入规格值"
                        size="small"
                        @keyup.enter.native="
                          handleInputConfirm(index, item.group_id)
                        "
                        @blur="handleInputConfirm(index, item.group_id)"
                      >
                      </el-input>
                      <el-button
                        v-else
                        class="button-new-tag"
                        size="small"
                        @click="showInput(index)"
                        >+ 添加</el-button
                      >
                    </div>
                  </div>
                </el-form-item>
                <div class="all_tab_input">
                  <span class="title">批量设置：</span>
                  <span>规格编码</span>
                  <el-input
                    placeholder="请输入内容"
                    v-model="tabform.sku_sn"
                    clearable
                    size="small"
                  ></el-input>
                  <span>条形码</span>
                  <el-input
                    placeholder="请输入内容"
                    v-model="tabform.bar_code"
                    clearable
                    size="small"
                  ></el-input>
                  <!-- <span>菜鸟id</span>
                  <el-input
                    placeholder="请输入内容"
                    v-model="tabform.cai_id"
                    clearable
                    size="small"
                  ></el-input> -->
                  <!-- <span>定价</span>
                  <el-input
                    placeholder="请输入内容"
                    v-model="tabform.set_price"
                    clearable
                    size="small"
                    type="number"
                    min="0"
                    @blur="isnumber(tabform.set_price, 15)"
                  ></el-input> -->

                  <span>划线价</span>
                  <el-input
                    placeholder="请输入内容"
                    v-model="tabform.line_price"
                    clearable
                    size="small"
                    type="number"
                    min="0"
                    @blur="isnumber(tabform.line_price, 5)"
                  ></el-input>
                  <!-- <span>成本价</span>
                  <el-input
                    placeholder="请输入内容"
                    v-model="tabform.cost_price"
                    clearable
                    size="small"
                    type="number"
                    min="0"
                    @blur="isnumber(tabform.cost_price, 6)"
                  ></el-input> -->
                  <span>供应价</span>
                  <el-input
                    placeholder="请输入内容"
                    v-model="tabform.supply_price"
                    clearable
                    size="small"
                    type="number"
                    min="0"
                    @blur="isnumber(tabform.supply_price, 7)"
                  ></el-input>
                  <span>库存</span>
                  <el-input
                    placeholder="请输入内容"
                    v-model="tabform.stock"
                    clearable
                    size="small"
                    type="number"
                    min="0"
                    @blur="isnumber(tabform.stock, 15)"
                  ></el-input>
                  <span>重量</span>
                  <el-input
                    placeholder="请输入内容"
                    v-model="tabform.weight"
                    clearable
                    size="small"
                    type="number"
                    min="0"
                    @blur="isnumber(tabform.weight, 8)"
                  ></el-input>
                  <span>重量</span>
                  <el-switch
                    v-model="tabform.status"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="2"
                    :change="change_oz"
                  >
                  </el-switch>
                  <el-button size="small" @click="all_change">确认</el-button>
                </div>
                <el-table
                  v-loading="loading"
                  :data="spec_list"
                  row-key="id"
                  height="600"
                  :span-method="objectSpanMethod"
                  v-if="rendering"
                  :row-class-name="tableRowClassName"
                >
                  <div v-for="(item, index) in spec_attr_2" :key="index">
                    <el-table-column
                      :label="item.group_name"
                      align="center"
                      width="90"
                    >
                      <template slot-scope="scope">
                        <div v-for="(items, idx) in scope.row.rows" :key="idx">
                          <div
                            class="text_center"
                            v-if="item.group_id == items.group_id"
                          >
                            {{ items.spec_value }}
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                  </div>
                  <el-table-column label="规格编码" align="center" width="200">
                    <template slot-scope="scope">
                      <el-input
                        class="text_center"
                        v-model="scope.row.form.sku_sn"
                        clearable
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="条形码" align="center" width="180">
                    <template slot-scope="scope">
                      <el-input
                        class="text_center"
                        v-model="scope.row.form.bar_code"
                        clearable
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column label="菜鸟id" align="center" width="130">
                    <template slot-scope="scope">
                      <el-input
                        class="text_center"
                        v-model="scope.row.form.cai_id"
                        clearable
                      >
                      </el-input>
                    </template>
                  </el-table-column> -->
                  <!-- <el-table-column label="定价" align="center" width="110">
                    <template slot-scope="scope">
                      <el-input
                        class="text_center"
                        v-model="scope.row.form.set_price"
                        clearable
                        type="number"
                        min="0"
                        @blur="
                          isnumber(scope.row.form.set_price, 15, scope.row.from)
                        "
                      >
                      </el-input>
                    </template>
                  </el-table-column> -->
                  <el-table-column label="划线价" align="center" width="110">
                    <template slot-scope="scope">
                      <el-input
                        class="text_center"
                        v-model="scope.row.form.line_price"
                        clearable
                        type="number"
                        min="0"
                        @blur="
                          isnumber(scope.row.form.line_price, 9, scope.row.form)
                        "
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column label="成本价" align="center" width="110">
                    <template slot-scope="scope">
                      <el-input
                        class="text_center"
                        v-model="scope.row.form.cost_price"
                        clearable
                        type="number"
                        min="0"
                        @blur="
                          isnumber(
                            scope.row.form.cost_price,
                            10,
                            scope.row.from
                          )
                        "
                      >
                      </el-input>
                    </template> 
                  </el-table-column>-->
                  <el-table-column label="供应价" align="center" width="110">
                    <template slot-scope="scope">
                      <el-input
                        class="text_center"
                        v-model="scope.row.form.supply_price"
                        clearable
                        type="number"
                        min="0"
                        @blur="
                          isnumber(
                            scope.row.form.supply_price,
                            11,
                            scope.row.form
                          )
                        "
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="库存" align="center" width="90">
                    <template slot-scope="scope">
                      <el-input
                        class="text_center"
                        v-model="scope.row.form.stock"
                        clearable
                        type="number"
                        min="0"
                        @blur="
                          isnumber(scope.row.form.stock, 16, scope.row.form)
                        "
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="重量" align="center" width="90">
                    <template slot-scope="scope">
                      <el-input
                        class="text_center"
                        v-model="scope.row.form.weight"
                        clearable
                        type="number"
                        min="0"
                        @blur="
                          isnumber(scope.row.form.weight, 12, scope.row.form)
                        "
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="规格状态" align="center" width="100">
                    <template slot-scope="scope">
                      <div class="form_status">
                        {{ scope.row.form.status == 1 ? "上架" : "下架" }}
                      </div>
                      <el-switch
                        v-model="scope.row.form.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="2"
                        :change="change_oz"
                      >
                      </el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="图片" width="200" align="center">
                    <template slot-scope="scope" v-if="showupload">
                      <div class="avatar-uploader">
                        <img
                          v-if="scope.row.form.show_img"
                          :src="scope.row.form.show_img"
                          alt=""
                          class="avatar"
                        />
                        <el-upload
                          :action="upload.url"
                          :on-success="spec_upload"
                          :show-file-list="false"
                        >
                          <template #default>
                            <i
                              v-if="!scope.row.form.show_img"
                              class="el-icon-plus avatar-uploader-icon"
                              @click="beforeUpload(scope.row.index)"
                            ></i>
                            <el-button
                              v-else
                              plain
                              class="text_center change_spac"
                              @click="beforeUpload(scope.row.index)"
                              size="mini"
                            >
                              更换图片
                            </el-button>
                          </template>
                        </el-upload>
                      </div>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column label="销量" align="center" width="100">
                    <template slot-scope="scope">
                      <el-input
                        class="text_center"
                        v-model="scope.row.form.sales"
                        clearable
                        disabled
                      >
                      </el-input>
                    </template>
                  </el-table-column> -->
                  <!-- <el-table-column
                    label="销售价(含税)"
                    align="center"
                    width="100"
                  >
                    <template slot-scope="scope">
                      <el-input
                        class="text_center"
                        v-model="scope.row.form.price"
                        clearable
                        disabled
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="关税" align="center" width="100">
                    <template slot-scope="scope">
                      <el-input
                        class="text_center"
                        v-model="scope.row.form.gs_price"
                        clearable
                        disabled
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="增值税" align="center" width="100">
                    <template slot-scope="scope">
                      <el-input
                        class="text_center"
                        v-model="scope.row.form.zzs_price"
                        clearable
                        disabled
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="消费税" align="center" width="100">
                    <template slot-scope="scope">
                      <el-input
                        class="text_center"
                        v-model="scope.row.form.xfs_price"
                        clearable
                        disabled
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="税费" align="center" width="100">
                    <template slot-scope="scope">
                      <el-input
                        class="text_center"
                        v-model="scope.row.form.sf_price"
                        clearable
                        disabled
                      >
                      </el-input>
                    </template>
                  </el-table-column> -->
                </el-table>
              </div>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品详情" name="fourth">
          <el-form
            :model="form"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-position
            label-width="200px"
          >
            <el-form-item label="商品图片" prop="logo_image">
              <img v-if="show_img" :src="show_img" alt="" class="avatar" />
              <el-upload
                :action="upload.url"
                :on-success="handleFileSuccess"
                :show-file-list="false"
              >
                <template #default>
                  <i
                    v-if="!show_img"
                    class="el-icon-plus avatar-uploader-icon"
                  ></i>
                  <el-button
                    v-else
                    plain
                    class="text_center change_spac"
                    size="mini"
                  >
                    更换图片
                  </el-button>
                </template>
              </el-upload>
            </el-form-item>
            <el-form-item label="轮播图片" prop="logo_image">
              <div v-if="show_imgs.length > 0" class="flex_align w_img_box">
                <div
                  class="img_box"
                  :key="index"
                  v-for="(item, index) in show_imgs"
                >
                  <img :src="item" alt="" class="avatar" />
                  <i class="el-icon-delete" @click="delet(index)"></i>
                </div>
              </div>
              <el-upload
                :action="upload.url"
                :show-file-list="false"
                :on-success="moreSuccess"
                :on-remove="moreRemove"
                multiple
              >
                <template #default>
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </template>
              </el-upload>
            </el-form-item>
            <el-form-item label="详情编辑" prop="logo_image">
              <quill-editor
                ref="QuillEditor"
                v-model="form.details"
                :options="editorOption"
              ></quill-editor>
              <el-upload
                class="xiang_upload"
                :action="upload.url"
                :on-success="uplodSuccess"
                :show-file-list="false"
              >
                <template #default>
                  <el-button plain class="text_center xiangqing" size="mini">
                  </el-button>
                </template>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div class="foot_box">
        <el-button type="primary" plain @click="save_shop">确定</el-button>
        <el-button plain @click="centerDialogVisible = true">重置</el-button>
      </div>
      <el-dialog title="重置" v-model="centerDialogVisible" width="30%" center>
        <span>确认重置所有填写的信息</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="allReset">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  addspu,
  yinseSearch,
  addspec,
  addSpecValue,
  getDetail,
  editsave,
  goodclass,
  goodbrand,
} from "@/api/goodsAdd";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  ["blockquote", "code-block"],

  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }], // superscript/subscript
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction

  [{ size: ["small", false, "large", "huge"] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ["link", "image", "video"],
  ["clean"], // remove formatting button
];
export default {
  name: "goodsEdit",
  components: {
    quillEditor,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 菜单表格树数据
      menuList: [],
      // 是否显示弹出层
      open: false,
      // 展开添加规格名
      show_addtitle: true,
      // 添加的规格名
      add_group_name: "",
      // 添加的规格值
      add_spec_value: "",
      // 显示某个规格添加规格值的input
      inputVisible: null,
      // 新添加的规格值
      new_spec: "",
      // 多规格上传规格图片的下标
      spec_upload_index: "",
      // 重新渲染
      rendering: true,
      // 渲染
      showupload: true,
      // 映射的选择参数
      mapping_list: {},
      centerDialogVisible: false,
      show_img: "",
      show_imgs: [],
      props: {
        value: "id",
        label: "cate_name",
        children: "next",
      },
      //
      editorOption: {
        placeholder: "编辑文章内容",
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  // 调用iview图片上传
                  document.querySelector(".xiangqing").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },

      spec_attr: [],
      spec_attr_2: [],
      spec_list: [],
      //多规格的批量表单输入
      tabform: {
        sku_sn: "",
        bar_code: "",
        // cai_id: "",
        line_price: "",
        // cost_price: "",
        supply_price: "",
        // set_price: "",
        weight: "",
        status: 2,
      },
      // 所有的编辑内容
      form: {
        // hs_code: "", //hs编码
        // warehouse: "", //仓库
        cate_id: "", //分类
        brand_id: "", //品牌
        goods_sn: "", //商品编码
        sku_sn: "", //规格编码
        bar_code: "", //条形码
        // cai_id: "", //菜鸟id
        title: "", //标题
        subtitle: "", //副标题
        // keywords: "", //关键词
        spec_type: 1, //规格类型 1单规格 2多规格
        image: [], //商品主图
        thumb_image: "", //商品主图缩略图
        images: [], //	轮播图
        details: "", //详情
        weight: "", //重量
        weigh: 0, //权重
        // is_ware: 2, //启用自定义税率 1启用 2关闭
        // tariff_rate: "", //关税税率
        // tariff_discount_ratio: "", //关税折扣比
        // added_rate: "", //增值税税率
        // added_discount_ratio: "", //增值税折扣比
        // excise_rate: "", //消费税税率
        // excise_discount_ratio: "", //消费税折扣比
        line_price: 0, //划线价
        // cost_price: 0, //成本价
        supply_price: 0, //供应价
        // set_price: 0, //定价
        price: 0, //销售价（含税）
        gs_price: 0, //关税
        zzs_price: 0, //增值税
        xfs_price: 0, //消费税
        sf_price: 0, //税费
        // label_ids: [], //标签
        // service_ids: [], //服务
        status: 2, //状态 1上架 2下架
        spec_many: {}, //多规格必传，json格式
      },
      activeName: "first",
      // 用户导入参数
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: {},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/api/upload/image",
      },
    };
  },
  created() {
    this.loading = false;
    this.getyinse();
    if (this.$route.params.id) {
      this.get_detail(this.$route.params.id);
    }
  },
  watch: {},
  activated() {
    if (this.$route.params.type == 2) {
      this.get_detail(this.$route.params.id);
    } else if (this.$route.params.type == 1) {
      this.allReset();
    }
    //只刷新数据，不改变整体的缓存
  },
  methods: {
    change_cate_id(e) {
      this.form.cate_id = e[e.length - 1];
    },
    uplodSuccess(res) {
      // 获取富文本组件实例
      let quill = this.$refs.QuillEditor.quill;
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, "image", res.data.full_url);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        // 提示信息，需引入Message
        Message.error("图片插入失败");
      }
    },
    // 判断价格和重量不为负数
    isnumber(e, index, data) {
      if (e < 0) {
        switch (index) {
          case 1:
            this.form.line_price = 0;
            break;
          // case 2:
          //   this.form.cost_price = 0;
          //   break;
          case 3:
            this.form.supply_price = 0;
            break;
          case 4:
            this.form.weight = 0;
            break;
          case 13:
            this.form.stock = 0;
            break;
          case 5:
            this.tabform.line_price = 0;
            break;
          // case 6:
          //   this.tabform.cost_price = 0;
          //   break;
          case 7:
            this.tabform.supply_price = 0;
            break;
          case 8:
            this.tabform.weight = 0;
            break;
          case 9:
            data.line_price = 0;
            break;
          // case 10:
          //   data.cost_price = 0;
          //   break;
          case 11:
            data.supply_price = 0;
            break;
          case 12:
            data.weight = 0;
            break;

          case 14:
            data.set_price = 0;
            break;
          case 15:
            this.tabform.stock = 0;
            break;
          case 16:
            data.stock = 0;
            break;
        }
      }
    },
    // 获取商品信息
    get_detail(id) {
      getDetail({ goods_id: id }).then((data) => {
        let res = data.data;
        // let label_ids = [];
        // if (res.label_ids) {
        //   label_ids = res.label_ids.split(",");
        //   label_ids.forEach((item, index) => {
        //     label_ids[index] = parseInt(item);
        //   });
        // }
        // let service_ids = [];
        // if (res.service_ids) {
        //   service_ids = res.service_ids.split(",");
        //   service_ids.forEach((item, index) => {
        //     service_ids[index] = parseInt(item);
        //   });
        // }
        this.form = {
          // hs_code: res.hs_code, //hs编码
          // warehouse: parseInt(res.warehouse), //仓库
          cate_id: parseInt(res.cate_id), //分类
          brand_id: parseInt(res.brand_id), //品牌
          goods_sn: res.goods_sn, //商品编码
          sku_sn: res.sku_sn, //规格编码
          bar_code: res.bar_code, //条形码
          // cai_id: res.cai_id, //菜鸟id
          title: res.title, //标题
          subtitle: res.subtitle, //副标题
          // keywords: res.keywords, //关键词
          spec_type: res.spec_type, //规格类型 1单规格 2多规格
          image: res.image, //商品主图
          thumb_image: res.thumb_image, //商品主图缩略图
          images: res.images, //	轮播图
          details: res.details, //详情
          weight: res.weight, //重量
          weigh: res.weigh, //权重
          // is_ware: res.is_ware, //启用自定义税率 1启用 2关闭
          // tariff_rate: res.tariff_rate, //关税税率
          // tariff_discount_ratio: res.tariff_discount_ratio, //关税折扣比
          // added_rate: res.added_rate, //增值税税率
          // added_discount_ratio: res.added_discount_ratio, //增值税折扣比
          // excise_rate: res.excise_rate, //消费税税率
          // excise_discount_ratio: res.excise_discount_ratio, //消费税折扣比
          line_price: res.line_price, //划线价
          // cost_price: res.cost_price, //成本价
          supply_price: res.supply_price, //供应价
          stock: res.stock,
          // set_price: res.set_price, //定价
          // price: res.price, //销售价（含税）
          // gs_price: res.gs_price, //关税
          // zzs_price: res.zzs_price, //增值税
          // xfs_price: res.xfs_price, //消费税
          // sf_price: res.sf_price, //税费
          // label_ids: label_ids, //标签
          // service_ids: service_ids, //服务
          status: res.status, //状态 1上架 2下架
          spec_many: res.specData, //多规格必传，json格式
        };
        this.show_img = res.image_url;
        this.show_imgs = res.images_url;
        if (res.spec_type == 2) {
          this.spec_attr = res.specData.spec_attr;
          this.spec_attr.forEach((item) => {
            this.spec_attr_2.unshift(item);
          });
          this.spec_list = res.specData.spec_list;
          this.combination();
        }
      });
    },
    // 批量编辑规格
    all_change() {
      let info = this.tabform;
      console.log(info);
      this.spec_list.forEach((item, index) => {
        this.spec_list[index].form.sku_sn = info.sku_sn;
        this.spec_list[index].form.bar_code = info.bar_code;
        // this.spec_list[index].form.cai_id = info.cai_id;
        this.spec_list[index].form.line_price = info.line_price;
        // this.spec_list[index].form.cost_price = info.cost_price;
        this.spec_list[index].form.supply_price = info.supply_price;
        this.spec_list[index].form.weight = info.weight;
        this.spec_list[index].form.status = info.status;
        // this.spec_list[index].form.set_price = info.set_price;
        this.spec_list[index].form.stock = info.stock;
      });
    },

    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    // 删除规格名和规格值
    delet_group(index) {
      this.spec_attr.splice(index, 1);
      this.spec_attr_2.splice(index, 1);
      this.combination();
    },
    //添加规格名和初始的规格值
    addtitle() {
      if (this.add_spec_value != "" && this.add_group_name != "") {
        let info = {
          spec_name: this.add_group_name,
          spec_value: this.add_spec_value,
        };
        addspec(info).then((res) => {
          this.spec_attr.push({
            group_name: info.spec_name,
            group_id: res.data.spec_id,
            spec_items: [
              { item_id: res.data.value_id, spec_value: info.spec_value },
            ],
          });
          this.spec_attr_2.unshift({
            group_name: info.spec_name,
            group_id: res.data.spec_id,
            spec_items: [
              { item_id: res.data.value_id, spec_value: info.spec_value },
            ],
          });
          this.add_group_name = "";
          this.add_spec_value = "";
          this.show_addtitle = true;
          this.combination();
        });
      }
    },
    // 组合tab表格的参数
    combination() {
      // 规格组合总数 (table行数)
      var totalRow = 1;
      let spec_attr = this.spec_attr;
      for (var i = 0; i < spec_attr.length; i++) {
        totalRow *= spec_attr[i].spec_items.length;
      }
      // 遍历tr 行
      var spec_list = [];
      for (i = 0; i < totalRow; i++) {
        var rowData = [],
          rowCount = 1, //
          specSkuIdAttr = [];
        // 遍历td 列
        for (var j = 0; j < spec_attr.length; j++) {
          var skuValues = spec_attr[j].spec_items; //遍历出规格值的数组
          rowCount *= skuValues.length; //规格值末尾的所在行数
          var anInterBankNum = totalRow / rowCount;
          var point = Math.floor((i / anInterBankNum) % skuValues.length);
          if (0 === i % anInterBankNum) {
            rowData.push({
              rowspan: anInterBankNum,
              item_id: skuValues[point].item_id,
              spec_value: skuValues[point].spec_value,
              group_id: spec_attr[j].group_id,
            });
          } else {
            rowData.push({
              rowspan: 0,
              item_id: skuValues[point].item_id,
              spec_value: skuValues[point].spec_value,
              group_id: spec_attr[j].group_id,
            });
          }
          specSkuIdAttr.push(skuValues[parseInt(point.toString())].item_id);
        }
        spec_list.push({
          value_id: specSkuIdAttr.join(","),
          rows: rowData,
          form: {
            sku_sn: "",
            bar_code: "",
            image: "",
            line_price: "",
            supply_price: "",
            stock: 0,
            status: 2,
            weight: 0,
          },
        });
      }

      // 合并旧sku数据
      if (this.spec_list.length > 0 && spec_list.length > 0) {
        for (i = 0; i < spec_list.length; i++) {
          var overlap = this.spec_list.filter((val) => {
            return val.value_id === spec_list[i].value_id;
          });
          if (overlap.length > 0) {
            spec_list[i].form = overlap[0].form;
          }
        }
      }
      this.spec_list = spec_list;
      this.rendering = false;
      setTimeout(() => {
        this.rendering = true;
      });
    },
    beforeUpload(index) {
      this.spec_upload_index = index;
    },
    // 上传spec的图片
    spec_upload(res) {
      this.spec_list[this.spec_upload_index].form.image = res.data.url;
      this.spec_list[this.spec_upload_index].form.show_img = res.data.full_url;
      this.showupload = false;
      setTimeout(() => {
        this.showupload = true;
      });
      this.spec_list = this.spec_list;
    },
    //删除规格值
    handleClose(tag, index, idx) {
      this.spec_attr[index].spec_items.splice(idx, 1);
      this.combination();
    },

    showInput(index) {
      this.new_spec = "";
      this.inputVisible = index;
    },
    // 添加规格值
    handleInputConfirm(index, id) {
      if (this.new_spec) {
        let info = {
          spec_id: id,
          spec_value: this.new_spec,
        };
        addSpecValue(info).then((res) => {
          this.spec_attr[index].spec_items.push({
            spec_value: this.new_spec,
            item_id: res.data.value_id,
          });
          this.new_spec = "";
          this.combination();
        });
      }
    },
    delet(index) {
      this.show_imgs.splice(index, 1);
      this.form.images.splice(index, 1);
    },
    // 上传多个图片
    moreSuccess(res) {
      this.form.images.push(res.data.url);
      this.show_imgs.push(res.data.full_url);
    },
    moreRemove(file) {
      console.log(file);
    },
    // 上传成功主图片
    handleFileSuccess(res) {
      this.form.image = res.data.url;
      this.form.thumb_image = res.data.thumb_url;
      this.show_img = res.data.full_url;
    },
    // 删除主图片
    handleRemove(res) {
      console.log(res);
      this.form.show_img = "";
      this.form.image = [];
    },
    // 获取选择框内的内容
    getyinse() {
      yinseSearch().then((res) => {
        this.mapping_list = {
          ...res.data,
        };
        this.goodclass(res.data);
        this.goodbrand();
      });
    },
    // 获取分类
    goodclass() {
      goodclass().then((res) => {
        let data = this.mapping_list;
        data.cate = res.data;
        this.mapping_list = {
          ...data,
        };
      });
    },
    // 获取品牌
    goodbrand() {
      goodbrand().then((res) => {
        let data = this.mapping_list;
        data.brand = res.data;
        this.mapping_list = {
          ...data,
        };
      });
    },

    handleSelectionChange(data) {},
    handleClick() {},
    change_oz() {},
    confime() {
      addspu(str).then((res) => {
        console.log(res);
      });
    },
    // 表单合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < this.spec_attr.length) {
        return {
          rowspan: row.rows[columnIndex].rowspan,
          colspan: row.rows[columnIndex].rowspan > 0 ? 1 : 0,
        };
      }
    },
    // 商品全部信息上传提交
    save_shop() {
      let form = this.form;
      console.log(form);
      let info = {
        goods_sn: form.goods_sn, //商品编码
        // hs_code: form.hs_code, //hs编码
        // warehouse: form.warehouse, //仓库
        cate_id: form.cate_id, //分类
        brand_id: form.brand_id, //品牌
        title: form.title, //标题
        subtitle: form.subtitle, //副标题
        // keywords: form.keywords, //关键词
        spec_type: form.spec_type, //规格类型 1单规格 2多规格
        image: form.image, //商品主图
        thumb_image: form.thumb_image, //商品主图缩略图
        images: form.images.join(","), //	轮播图
        details: form.details, //详情
        weigh: form.weigh, //权重
        // is_ware: form.is_ware, //启用自定义税率 1启用 2关闭
        // label_ids: form.label_ids.join(","), //标签
        // service_ids: form.service_ids.join(","), //服务
        status: form.status, //状态 1上架 2下架
      };
      // if (info.is_ware == 1) {
      //   info.tariff_rate = form.tariff_rate; //关税税率
      //   info.tariff_discount_ratio = form.tariff_discount_ratio; //关税折扣比
      //   info.added_rate = form.added_rate; //增值税税率
      //   info.added_discount_ratio = form.added_discount_ratio; //增值税折扣比
      //   info.excise_rate = form.excise_rate; //消费税税率
      //   info.excise_discount_ratio = form.excise_discount_ratio; //消费税折扣比
      // }
      if (info.spec_type == 2) {
        let spec_list = [];
        this.spec_list.forEach((item) => {
          spec_list.push({
            value_id: item.value_id,
            rows: item.rows,
            form: {
              sku_sn: item.form.sku_sn,
              bar_code: item.form.bar_code,
              image: item.form.image,
              line_price: item.form.line_price,
              // cost_price: item.form.cost_price,
              supply_price: item.form.supply_price,
              status: item.form.status,
              weight: item.form.weight,
              stock: item.stock,
              // cai_id: item.form.cai_id,
              // price: item.form.price, //销售价（含税）
              // gs_price: item.form.gs_price, //关税
              // zzs_price: item.form.zzs_price, //增值税
              // xfs_price: item.form.xfs_price, //消费税
              // sf_price: item.form.sf_price, //税费
              // set_price: item.form.set_price, //定价
            },
          });
        });
        let spec_many = {
          spec_list: spec_list,
          spec_attr: this.spec_attr,
        };
        info.spec_many = JSON.stringify(spec_many); //多规格必传，json格式
      } else {
        // info.cai_id = form.cai_id;
        info.sku_sn = form.sku_sn;
        info.bar_code = form.bar_code;
        info.line_price = form.line_price;
        // info.cost_price = form.cost_price;
        info.supply_price = form.supply_price;
        info.weight = form.weight;
        info.stock = form.stock;
        // info.price = form.price; //销售价（含税）
        // info.gs_price = form.gs_price; //关税
        // info.zzs_price = form.zzs_price; //增值税
        // info.xfs_price = form.xfs_price; //消费税
        // info.sf_price = form.sf_price; //税费
        // info.set_price = form.set_price; //定价
      }
      if (this.$route.params.id) {
        info.goods_id = this.$route.params.id;
        editsave(info).then((res) => {
          this.$router.replace({
            path: "/commodityManagement/commodity",
          });
        });
      } else {
        info.goods_id = this.$route.params.id;
        // let visitedViews = this.$store.state.tagsView.visitedViews;
        // let view = {};
        // visitedViews.some((item) => {
        //   if (item.path == this.$route.path) {
        //     view = item;
        //     return true;
        //   }
        // });
        console.log(info)
        addspu(info).then((res) => {
          // this.$store.dispatch("tagsView/delView", view);
          this.$router.replace({
            path: "/commodityManagement/commodity",
          });
        });
      }
    },
    // 全部信息重置
    allReset() {
      // 展开添加规格名
      this.show_addtitle = true;
      // 添加的规格名
      this.add_group_name = "";
      // 添加的规格值
      this.add_spec_value = "";
      // 新添加的规格值
      this.new_spec = "";
      // 多规格上传规格图片的下标
      this.spec_upload_index = "";
      this.show_img = "";
      this.show_imgs = [];
      //
      this.editorOption = {
        placeholder: "编辑文章内容",
      };
      this.spec_attr = [];
      this.spec_attr_2 = [];
      this.spec_list = [];
      // 所有的编辑内容
      this.form = {
        // hs_code: "", //hs编码
        // warehouse: "", //仓库
        cate_id: "", //分类
        brand_id: "", //品牌
        goods_sn: "", //商品编码
        sku_sn: "", //规格编码
        bar_code: "", //条形码
        // cai_id: "", //菜鸟id
        title: "", //标题
        subtitle: "", //副标题
        // keywords: "", //关键词
        spec_type: 1, //规格类型 1单规格 2多规格
        image: [], //商品主图
        thumb_image: "", //商品主图缩略图
        images: [], //	轮播图
        details: "", //详情
        weight: "", //重量
        weigh: 0, //权重
        // is_ware: 2, //启用自定义税率 1启用 2关闭
        // tariff_rate: "", //关税税率
        // tariff_discount_ratio: "", //关税折扣比
        // added_rate: "", //增值税税率
        // added_discount_ratio: "", //增值税折扣比
        // excise_rate: "", //消费税税率
        // excise_discount_ratio: "", //消费税折扣比
        // set_price: 0,
        line_price: 0,
        // cost_price: 0,
        supply_price: 0,
        // gs_price: 0,
        // zzs_price: 0,
        // xfs_price: 0,
        // sf_price: 0,
        // set_price: 0,
        // label_ids: [], //标签
        // service_ids: [], //服务
        stock: 0, //库存
        status: 2, //状态 1上架 2下架
        spec_many: {}, //多规格必传，json格式
      };
      //多规格的批量表单输入
      this.tabform = {
        // set_price: "",
        sku_sn: "",
        bar_code: "",
        // cai_id: "",
        line_price: "",
        // cost_price: "",
        supply_price: "",
        weight: "",
        status: 2,
        stock: "",
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding-bottom: 100px;
}
.xiangqing {
  display: none;
}
.all_tab_input {
  margin-bottom: 20px;
  .title {
    color: #409eff;
    margin: 0;
  }
  span {
    margin: 0 15px;
  }
  .el-button {
    margin-left: 10px;
  }
  .el-input {
    width: 100px;
  }
}
.input_box {
  .el-input {
    width: 120px;
  }
}
.avatar-uploader {
  width: 100px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  margin: 0 auto;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.w_img_box {
  margin-bottom: 10px;
  .img_box {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    position: relative;
    .el-icon-delete { 
      position: absolute;
      right: 0;
      top: 0;
      background-color: #f3f3f3;
      width: 20px;
      height: 20px;
      line-height: 20px;
      border-radius: 50%;
      text-align: center;
    }
  }
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  display: inline-block;
}
.change_spac {
  margin-top: 4px;
}
.el-form-item {
  width: 100%;
}
.el-input {
  width: 600px;
}
.good_img {
  width: 100px;
  height: 100px;
}
.text_center {
  text-align: center;
  width: 100%;
}
.form_status {
  margin-right: 10px;
  display: inline-block;
  align-items: center;
}
.tag_box {
  margin-right: 10px;
}
.foot_box {
  width: 100%;
  padding: 20px 100px 20px 344px;
  position: fixed;
  bottom: 0;
  left: 0px;
  background-color: #ffffff;
  z-index: 100;
}
.el-icon-close {
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border: 0.5px solid #ccc;
  border-radius: 50%;
  color: #999;
  font-size: 10px;
  margin-left: 8px;
}
</style>

